<!doctype html>
<html>
	<head>
		<title>OverlayJS</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link type="text/css" rel="stylesheet" href="../themes/dark/overlay.css" />
		<link type="text/css" rel="stylesheet" href="examples.css" />
	</head>
	<body>
		<h2>Example 1</h2>
		<p>Default functionality</p>
		<div id="example_1" title="Example 1" style="display: none">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus volutpat odio, et lobortis sapien convallis vitae.</p><p>Nullam sed magna eu lectus ornare bibendum. Vestibulum vestibulum scelerisque aliquam. Mauris imperdiet malesuada erat id fringilla.</p>
		</div>
		<input type="button" id="button_1" value="Click here" />
		
		<h2>Example 2</h2>
		<p>Modal confirmation</p>
		<div id="example_2" title="Example 2" style="display: none">Did you watch the last Oscars?</div>
		<input type="button" id="button_2" value="Click here" />
		
		<h2>Example 3</h2>
		<p>Callback</p>
		<div id="example_3" title="Example 3" style="display: none">How many Grammys did Amy Winehouse win?</div>
		<input type="button" id="button_3" value="Click here" />
		
		<h2>Example 4</h2>
		<p>Remote content</p>
		<div id="example_4" title="Example 4" style="display: none"></div>
		<input type="button" id="button_4" value="Click here" />
		
		<script type="text/javascript" src="../overlay.js"></script>
		<script type="text/javascript" src="examples.js"></script>
	</body>
</html>